<template>
	<view class="msg-context">
		<NavBar title="消息中心" />
		<view class="section">
			<block v-for="(item, index) in boardList" :key="item.url">
				<view class="item" @click="clickHandle(index)">
					<view class="left">
						<image :src="item.url" class="item-img" mode="scaleToFill" />
						<view class="text">{{ item.text }}</view>
					</view>
					<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/arrow_right_grey.png"
						class="right-img" mode="scaleToFill" />
				</view>
			</block>
		</view>
		<view class="msg-box">
			<p class="xsm-notice-time">2021-10-23</p>
			<view class="xsm-notice-textbox">
				<p>新版正式上线，</p>
			</view>
		</view>
		<view class="msg-box">
			<p class="xsm-notice-time">2020-7-20123123123123123123123</p>
			<view class="xsm-notice-textbox">
				<p>“种草客”正式上线，欢迎探店种草~</p>
			</view>
		</view>
		<TabBar />
	</view>
</template>

<script setup>
	import NavBar from '../../../components/nav-bar'
	import TabBar from '../../../components/tab-bar.vue'
	const boardList = [{
			url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/system_message.png',
			text: '系统消息'
		},
		{
			url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/admin_message.png',
			text: '帮助中心'
		}
	]
</script>

<style lang="scss" scoped>
	.msg-context {
		background-color: #f0f0f0;
		height: 100vh;
	}

	.section {
		height: 190rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 94rpx;
			padding: 0 20rpx;
			border-bottom: 2rpx #f0f0f0 solid;

			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;

				.item-img {
					width: 64rpx;
					height: 64rpx;
					margin-right: 8rpx;
				}
			}

			.right-img {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
.msg-box{
	height: 5.4rem;
}
	.xsm-notice-time {
		width: 50%;
		height: 1.4rem;
		line-height: 1.4rem;
		font-size: 12px;
		background: #a1a1a1;
		color: #fff;
		text-align: center;
		border-radius: 1.4rem;
		margin-left: 25%;
		margin-top: 0.75rem;
	}

	.xsm-notice-textbox {
		width: 92%;
		float: left;
		background: #fff;
		margin: 0.75rem 4% 0;
		border-radius: 0.5rem;
		padding: 10px;
		box-sizing: border-box;
		font-weight: bolder;
	}
</style>